<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
       div#img img{
           vertical-align: middle;
       }

        div.tishi{
            float: right;
        }
        div#img{
    float: left;
}
        .clear:after{
            content: "";
            clear: both;
            display: block;
        }
        #dl{
            position: relative;
            right: 700px;
            top: 20px;
            font-size: 20px;
        }
    #content {
        padding-top: 40px;
        background-image: url("banner.png");
        height: 475px;
        width: 990px;
    }
    .class1 {
        margin-top: 60px;
    }
        .class {
            width: 200px;
            height: 30px;
            margin-top: 20px;
            list-style-type: none;
            margin-left: 20px;

        }
        li{
            list-style-type: none;

        }
        form {
            padding-left: 20px;
            border: 1px solid red;
            margin-left: 600px;
            background-color: white;
            width: 300px;
            height: 250px;
        }
        /*<img src="banner.png" height="475" width="990"/>*/
#nav{
border: 1px solid;
    width: 990px;
}
        span#til{
            display: inline-block;
            font-size: 20px;
            margin-right: 40px;
            text-indent: 1em;
        }
        li a img#picture{
            vertical-align: middle;
        }
        input#name{
            background-image: url("icon1.jpg");
            background-repeat: no-repeat;
            text-indent: 3em;
        }
        input#pass {
            background-image: url("icon2.jpg");
            background-repeat: no-repeat;
            text-indent: 3em;
        }
        span#chexkbox {
            margin-left: 10px;
            margin-right: 40px;
        }
        li#d2 {
            margin-left: 20px;
        }
        input#submit {
            background-color: red;
            color: white;
        }
        span#botom{
            display: inline-block;
            margin-left: 60px;
        }
        div#dibu{
            width: 990px;
        }
.zuihou{
    text-align: center;
}
    </style>
</head>
<body>
<div id="nav" class="clear">
    <div id="img" class="clear"> <img src="logo.png" height="60" width="170"/></div>
    <div id="dl" class="tishi clear" >欢迎登录</div>
</div>
<div>

<div id="content">
    <form action="https://www.baidu.com">
        <li><span id="til">京东会员</span><a href="#"><img id="picture" src="icon5.jpg" height="16" width="16"/>立即注册</a></li>
        <li><input id="name" class="class class1" type="text" name="name" value="邮箱/用户名/已验证手机"> </li>
        <li><input id="pass" class="class" type="password" name="pass"></li>
        <li id="d2"><input id="autodenglu" type="checkbox" name="autodenglu"><span id="chexkbox">自动登录</span><a href="#">忘记密码</a></li>
        <input id="submit" class="class" type="submit" value="登录">
    </form>

</div>

    <div id="dibu">

       <span id="botom">关于我们| 联系我们| 人才招聘| 商家入驻| 广告服务| 手机京东| 友情链接| 销售联盟| 京东社区| 京东公益| English Site</span>
       <div class="zuihou">
           Copyright?2004-2017 京东JD.com 版权所有
       </div>

    </div>

</div>

</body>
</html>